<template>
<view class="container">
	<view class="group">
	 <view class="group-item" @click="jumt('/pages/addBank/index')">
		 <view v-if="!userBank.bank_account">请选择银行卡</view>
		 <view v-else>银行卡号: {{ userBank.bank_account}}</view>
		 <view>
			 <u-icon name="arrow-right" size="24"></u-icon>
		 </view>
	 </view>
	 
	 <view class="container-haed-info">
	   <view class="container-haed-info-left">

	 	<view class="container-haed-info-left-text">
	 		<view>可提现(元)</view>
	 		<view>{{ canMoney }}</view>
	 	</view>
	   </view>	
	   <view class="container-haed-info-right" @click="handleShowModel">
	 	  规则
	   </view>
	   <view class="container-haed-info-bg">
	 	<image src="https://kangxi.banbanxiaxia.cn/upload/1/common/images/20240612/20240612062137171818769755720.png" mode="aspectFill"></image>
	   </view>
	 </view>
	 
	<view class="container-box">
		<view class="container-box-title">提现金额</view>
		<view class="container-box-item">
			<input v-model.number="money" type="number" placeholder="请输入金额" />
		</view>
		<view class="container-box-describe">
			<view>
				<!-- 可提现余额: &yen;{{ canMoney }} -->
			</view>
			<view>
				最少提现金额为&yen;100, 手续费为0%
			</view>
		</view>
	</view>
	</view>

	
		
		<view class="footer">
			<view class="footer-btn" @click="onSubmit">申请提现</view>
			<view class="footer-text" @click="jumt('/pages/my/record')">提现记录</view>
		</view>

	<u-modal :show="showModel" title="温馨提示" showCancelButton closeOnClickOverlay
	   @confirm="confirmTrade"
	   @close="showModel = false" 
	   @cancel="showModel = false">
		<template>
			是否确定提现吗?
		</template>
	</u-modal>
</view>
</template>

<script>
	import request from "@/api/request.js"
	export default {
		data() {
			return {
				showModel: false,
				userBank: {},
				money: null,
				canMoney: null
			}	
		},
		components:{
		},
		onLoad() {
		  this.userBank = uni.getStorageSync('userBank')
		  this.token = uni.getStorageSync('token')
		  const info = JSON.parse(uni.getStorageSync('userInfo'))
		  this.canMoney = info.balance_money
		},
		methods: {
		  jumt(url){
			  uni.redirectTo({
			  	url
			  })
		  },
		  handleShowModel(){
			uni.showModal({
				title: '规则',
				content: '最少提现金额为100元, 手续费为0%',
				showCancel: false,
				success() {
					
				},
				fail() {
					
				}
			})
		  },
		  confirmTrade(){
			  if(!this.userBank.bank_account){
				 uni.$u.toast('请选择银行卡')
				 this.showModel = false 
				 return
			  }
			  uni.showLoading({
			  	title: '提现中...'
			  })
			const that = this
		    request({
			  url: '/kx/withdrawal/apply',
			  data: {
				 token: that.token,
				 apply_money: that.money,
				 bank_id: that.userBank.bank_account
			  },
			  method: 'POST',
			  successCb(res){
				  that.getUserInfo()
				  uni.hideLoading()
				  uni.$u.toast('申请成功')
				  that.showModel = false
			  },
			  failCb(){
				  uni.hideLoading()
				  that.showModel = false 
			  }
			})
		  },
		  getUserInfo(){
		    const that = this
		  	request({
		  		url: '/kx/index/getUserInfo',
		  		 data: { token: that.token },
		  		successCb: (res) => {
		  			that.canMoney = res.data.data.balance_money;
		  			// 保存用户信息
		  			uni.setStorageSync('userInfo',JSON.stringify(res.data.data))
		  			// this.login(res.data.data);
		  		},
		  	});
		  },
		  onSubmit(){
		    if(this.money){
				if(this.money < 100){
				  uni.$u.toast('提现金额不满足,最少100元')
				  return
				}
				this.showModel = true
			}  
		  }
		}
	}
</script>

<style scoped lang="scss">
.container{
	width: 100%;
	background: #F4F4F4;
	height: 100vh;
	&-haed {
	  &-info {
		position: relative;
		width: 670rpx;
		height: 160rpx;
		background: linear-gradient( 90deg, #FF8732 0%, #FFB65E 100%);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 40rpx;
	    &-left {
		 display: flex;
		 align-items: center;
		 padding-left: 20rpx;
		 image {
		   width: 108rpx;
		   height: 108rpx;
		   background-size: 100%;
		 }
		 view {
			color: #fff;
			font-weight: 500;
			margin-left: 10rpx;
		   &:nth-child(1){
			 font-size: 24rpx;
		   }
		   &:nth-child(2){
			font-size: 60rpx;
			line-height: 1.5;
		   }
		 }
		}
		&-bg {
		 position: absolute;
		 right: 0;
		 top: -100rpx;
		 width: 244rpx;
		 height: 244rpx;
		 image {
		  width: 100%;
		  height: 100%;
		  background-size: 100%;
		 }
		}
		&-right {
		  width: 88rpx;
		  height: 40rpx;
		  color: #fff;
		  background: #3D3D3D;
		  font-size: 24rpx;
		  text-align: center;
		  border-radius: 30rpx;
		  line-height: 40rpx;
		  margin-right: 20rpx;
		  z-index: 2;
		}
	  }
	  }
	  
	&-box {
	 width: 680rpx;
	 background: $uni-bg-color;
	 border-radius: 16rpx;
	 margin: 0 auto;
	 padding: 24rpx;
	 &-title {
	   font-size: 28rpx;
	   padding-bottom: 24rpx;
	 }
	 &-item {
	   background: #F3F3F3;
	   margin: 0 24rpx;
	   padding: 20rpx;
	   border-radius: 20rpx;
	 }
	 &-line {
		 border-bottom: 2rpx solid #e4e4e4;
		 margin:24rpx;
	 }
	 &-describe {
		 margin-top: 20rpx;
		 font-size: 24rpx;
		 color: #696969;
	 }
	}
}
.footer {
	margin-top: 24rpx;
	&-btn {
	 margin: 0 auto;
	 width: 680rpx;
	 height: 88rpx;
	 background: #FF8732;
	 text-align: center;
	 line-height: 88rpx;
	 color: $uni-bg-color;
	 border-radius: 45rpx;
	}
	&-text {
	  text-align: center;
	  margin-top: 24rpx;
	}
}
.group {
	background: $uni-bg-color;
	padding-bottom: 24rpx;
	&-item{
		@include layout(space-between, center);
		padding: 24rpx;
	}
}
</style>
